<template>
  <el-popover
    :width="400"
    trigger="click"
  >
    <template #reference>
      <div class="emoji-btn" @click="showPopover">
        <img src="@/assets/image/emoji/01.png" alt="">
      </div>
    </template>
    <div class="emoji-box">
      <el-tabs type="border-card" class="emoji-tabs">
        <el-tab-pane :label="item.name" v-for="item in emojiJson" lazy>
          <el-scrollbar height="142px">
            <div class="emoji-content">
              <div class="emoji-item" v-for="ite in item.list" @click="addEmoji(ite)">
                <img v-imgLazy="`${imgHost}/${ite.imgUrl}`">
              </div>
            </div>
          </el-scrollbar>
        </el-tab-pane>
      </el-tabs>
    </div>
  </el-popover>
</template>

<script setup lang='ts'>
import {reactive, ref, computed, watch, onMounted, nextTick} from "vue"
import {useRouter, useRoute} from "vue-router"
import axios from 'axios'

const imgHost = ref<string>('https://static.scrm.keyid.cn/assets/emoji')
let emojiJson = ref<Array<any>>([])

const emit = defineEmits(['change'])

const addEmoji = <T>(item:T):void => {
  emit('change', item)
}

const getEmojiJsonFn = async () => {
  const json_url = 'https://static.scrm.keyid.cn/assets/emoji/emoji.json'
  return axios.get(json_url).then(res=>{
    emojiJson.value = res.data
  })
}

const showPopover = async () => {
  if(!emojiJson.value.length){
    await getEmojiJsonFn()
  }
}

</script>
<style lang="scss" scoped>
.emoji-btn{
  display: flex;
  align-items: center;
  img{
    width: 30px;
    height: 30px;
  }
}
.emoji-box{
  
  ::v-deep .el-tabs--border-card{
    &>.el-tabs__content{
      padding: 6px !important;
    }
    &>.el-tabs__header .el-tabs__item{
      &:hover{
        color: #FF6B00;
      }
      &.is-active{
        color: #FF6B00;
      }
    }
  }
  .el-tabs.emoji-tabs{
    .el-tabs__content{
      .emoji-content{
        display: grid;
        grid-gap: 2px;
        grid-template-columns: repeat(10, minmax(32px, 1fr));
        .emoji-item{
          width: 32px;
          height: 32px;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #fff;
          user-select: none;
          &:hover{
            cursor: pointer;
            img{
              transform: scale(1.4);
            }
          }
          img{
            width: 72%;
            height: 72%;
            transition: all .2s;
          }
        }
      }

    }
  }
}
</style>
